<template>
  <div class="h-full bg-zinc-200 duration-400 xl:pt-1 dark:bg-zinc-800">
    <div
      class="mx-auto h-full bg-white px-1 pt-[50%] duration-400 xl:h-[360px] xl:max-w-screen-lg xl:rounded-sm xl:border-[1px] xl:border-zinc-200 xl:px-4 xl:py-10 dark:bg-zinc-900 xl:dark:border-zinc-600"
    >
      <div
        v-if="JSON.stringify(isSuccess) !== 'null'"
        class="flex items-center justify-center"
      >
        <m-svg-icon
          v-if="isSuccess"
          name="pay-success"
          class="mr-4 h-8 w-8"
        ></m-svg-icon>
        <m-svg-icon
          v-if="!isSuccess"
          name="pay-fail"
          class="mr-4 h-8 w-8"
        ></m-svg-icon>
        <p class="text-ml text-zinc-900 dark:text-zinc-200">
          {{ isSuccess ? '支付成功' : '支付失败' }}
        </p>
      </div>

      <m-button
        class="mx-auto mt-8 w-full xl:w-[120px] dark:bg-zinc-800"
        @click="onConfirm"
        >确定</m-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getPayResult } from '@/api/pay';
import { useUserStore } from '@/store';

const route = useRoute();
const router = useRouter();
const isSuccess = ref(null);
const userStore = useUserStore();

const getResultData = async () => {
  const res = await getPayResult(route.query.out_trade_no);
  isSuccess.value = res;
};
getResultData();

const onConfirm = () => {
  userStore.getProfile();
  userStore.router.push('/');
};
</script>

<style lang="scss" scoped></style>
